<template>
    <div class="content">
        <!-- {{ form }} -->
        <TitleComponent mainTitle="列表" :subTitle="subTitle" />
        <div class="box">
            <div class="box_header">
                <div class="box_title">{{ subTitle }}</div>
                <div class="pull-right">
                    <el-button type="primary" :icon="Operation" @click="backTolist">列表</el-button>
                </div>
            </div>
            <avue-form ref="formRef" :option="option" v-model="form" @submit="handleSubmit"></avue-form>
        </div>
    </div>
</template>

<script setup>
import { ref, watchEffect } from "vue";
import { Operation } from "@element-plus/icons-vue";
import TitleComponent from '@/components/title/index.vue';
import { useRouter, useRoute } from 'vue-router';
import Editor from '@/components/Editor/index.vue';

// 外部传递的列定义数组

// 路由带参数过来

/**
 * 列定义数组示例
 * 每个对象表示一个表单字段的定义
 *
 * @typedef {Object} ColumnDefinition
 * @property {string} label - 列标题
 * @property {string} prop - 对应的数据属性名
 * @property {string} [type] - 输入类型，默认为文本输入
 * @property {number} [step] - 步长（如果适用于数值类型）
 * @property {boolean} [stepStrictly] - 数值
 * @property {number} [offset] - 布局偏移量
 * @property {number} [span] - 栅格占据的列数
 * @property {boolean} [row] - 是否单独一行显示
 * @property {number} [min] - 输入值的最小限制
 * @property {string} [listType] - 上传图片时使用的图片类型
 */


// 跳转路由
const router = useRouter();
const route = useRoute();
const subTitle = ref("创建");

const backTolist = () => {
    router.push('/content/commonProblem');
}

const externalColumns = ref([
    {
        label: "名称",
        prop: "name",
        type: "input",
        step: 1,
        stepStrictly: true,
        offset: 4,
        span: 6,
        row: true,
    },
    {
        label: '详情',
        prop: 'message',
        span: 24,
        component: Editor,
    },
    {
        label: "是否发布",
        prop: "disableWithdrawal",
        type: "switch",
        offset: 4,
        row: true,
        value: 0,
    },
    {
        label: '排序',
        prop: 'input',
        span: 12,
        type: 'number',
        controlsPosition: 'top',
    },
]);

const form = ref({});
const option = ref({});

const handleSubmit = (formData, done) => {
    console.log(formData);
    done();
};

// 监听外部传递列定义数组的变化
watchEffect(() => {
    option.value = {
        column: externalColumns.value.map((column) => ({
            label: column.label,
            prop: column.prop,
            type: column.type,
            listType: column.listType,
            offset: 4, // 可根据需要设置其他默认值
            row: true,
            min: column.min, //最小值
            value: column.value,
            disabled: column.disabled, // 禁用
            dicData: column.dicData,
            filterable: column.filterable,
            rules: column.rules,
            labelWidth: column.labelWidth,
            component: column.component,
            controlsPosition: column.controlsPosition,
            // span: column.span,
        })),
    };



    // 根据外部列定义动态设置表单初始值
    form.value = {};
    externalColumns.value.forEach((column) => {
        // console.log(column.prop)
        // form.value[column.prop] = ""; // 根据prop属性初始化表单值
    });
});

// 检查路由参数并调用API请求
onMounted(() => {
    const { index } = route.query;
    if (index) {
        subTitle.value = "编辑";
        // 调用API接口获取数据
    }
});


</script>

<style scoped>
.content {
    background-color: #eff1f7;
}


.box {
    margin: 0 20px;
}

.box_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-bottom: 30px; */
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #f4f4f4;
    background-color: white;
}

.box_title {
    font-size: 16px;
    line-height: 30px;
}

::v-deep .el-collapse-item__content {
    padding-top: 50px !important;
}
</style>